Vue.component('genres-menus', {
    data: function () {
      return {
          perSize: 0,
          categoryList: []
      }
    },
    methods: {
      loadCategoryList: function () {
          let url = '/api/v1/category/list'
          axios.get(url)
              .then(res => {
                  this.categoryList = res.data
                  this.perSize = Number(this.categoryList.length / 3 + 1).toFixed(0)
              })
      }
    },
    mounted() {
      this.loadCategoryList()
    },
    template: `
        <ul class="dropdown-menu multi-column columns-3">
            <li class="active">
                <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                        <li v-for="(item, index) in categoryList" v-if="index>=0 && index<perSize">
                            <a :href="'genres.html?id='+item.id">{{item.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                        <li v-for="(item, index) in categoryList" v-if="index>=perSize && index<perSize*2">
                            <a :href="'genres.html?id='+item.id">{{item.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                        <li v-for="(item, index) in categoryList" v-if="index>=perSize*2 && index<perSize*3">
                            <a :href="'genres.html?id='+item.id">{{item.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </li>
        </ul>
    `
})

Vue.component('login-component', {
    data: function () {
        return {
            params: {
                username: null,
                passwd: null
            },
            errorMsg: null
        }
    },
    methods: {
        login: function () {
            let url = '/api/v1/user/login'
            axios.post(url, this.params)
                .then(res => {
                    if (res.code === 200) {
                        // console.log(res.data.token)
                        sessionStorage.setItem("loginUser", JSON.stringify(res.data))
                        // sessionStorage.setItem("token", res.data.token)
                        window.location.reload()
                    } else {
                        this.errorMsg = res.message
                    }
                })
        }
    },
    mounted() {
        // this.loadCategoryList()
    },
    template: `
        <div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    Sign In & Sign Up
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="w3_login_module">
                            <div class="module form-module">
                                <div class="toggle"><i class="fa fa-times fa-pencil"></i>
                                    <div class="tooltip">Click Me</div>
                                </div>
                                <div class="form">
                                    <h3>Login to your account</h3>
                                    <form action="#" method="post" @submit.prevent="login">
                                        <input v-model="params.username" type="text" name="Username" placeholder="Username" required="">
                                        <input v-model="params.passwd" type="password" name="Password" placeholder="Password" required="">
                                        <input type="submit" value="Login">
                                        <h4 style="color: red; padding: 5px;" v-show="errorMsg!=null">登录失败：{{errorMsg}}</h4>
                                    </form>
                                </div>
                                <div class="form">
                                    <h3>Create an account</h3>
                                    <form action="#" method="post">
                                        <input type="text" name="Username" placeholder="Username" required="">
                                        <input type="password" name="Password" placeholder="Password" required="">
                                        <input type="email" name="Email" placeholder="Email Address" required="">
                                        <input type="text" name="Phone" placeholder="Phone Number" required="">
                                        <input type="submit" value="Register">
                                    </form>
                                </div>
                                <div class="cta"><a href="#">Forgot your password?</a></div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    `
})

Vue.prototype.$logout = function() {
    // sessionStorage.removeItem("token")
    sessionStorage.removeItem("loginUser")
    // alert("登出成功")
    location.reload()
}

Vue.prototype.$timeAgo = function (dateTimeString) {
    // 定义一个时间格式，这里假设输入的日期时间字符串是 ISO 8601 格式或兼容的格式
    // 例如："2023-10-05T14:48:00.000Z" 或 "2023-10-05 14:48:00"
    const datePattern = /^\d{4}[-/\s](?:(0?[1-9]|1[0-2])[-/\s](?:(0?[1-9])|([12][0-9])|(3[01]))|((0?[13578]|1[02])[-/\s]31)|((0?[469]|11)[-/\s](?:(0?[1-9])|([12][0-9])|(30)))|(0?2[-/\s](?:(0?[1-9])|([1][0-9])|(2[0-8]))))(?:\s(?:(?:[01]\d|2[0-3])(?::([0-5]\d))?(?::([0-5]\d))?))?(?:[Z]|([\+-])([01]\d|2[0-3]):?([0-5]\d)?)?$/i;
    const timePattern = /^(?:\d{2}):(?:\d{2})(?:\:\d{2})?$/;

    function parseDate(dateString) {
        const date = new Date(dateString);
        if (isNaN(date)) {
            throw new Error('Invalid date string');
        }
        return date;
    }

    try {
        const now = new Date();
        let date = new Date(dateTimeString);

        // 如果只传入了时间，则默认为今天的时间
        if (timePattern.test(dateTimeString) && !datePattern.test(dateTimeString)) {
            date.setFullYear(now.getFullYear());
            date.setMonth(now.getMonth());
            date.setDate(now.getDate());
        }

        // 计算时间差
        const diff = now - date;

        const second = 1000;
        const minute = second * 60;
        const hour = minute * 60;
        const day = hour * 24;
        const month = day * 30; // 简化计算，假设一个月30天
        const year = month * 12; // 简化计算，不考虑闰年

        if (diff < minute) {
            return '刚刚';
        } else if (diff < hour) {
            return Math.round(diff / minute) + '分钟前';
        } else if (diff < day) {
            return Math.round(diff / hour) + '小时前';
        } else if (diff < month) {
            return Math.round(diff / day) + '天前';
        } else if (diff < year) {
            return Math.round(diff / month) + '个月前';
        } else {
            return Math.round(diff / year) + '年前';
        }
    } catch (error) {
        return '无效的日期时间字符串';
    }
}

